<template>
	<view>
		<view class="cu-bar bg-white search">
		  <view class="search-form">
		    <text class="cuIcon-search"></text>
		    <input type="text" v-model="filter" placeholder="输入机器名称或IMEI搜索" confirm-type="search" @confirm="search"></input>
		  </view>
		  <view class="action">
		    <button class="cu-btn bg-gradual-green shadow-blur" @tap="search">搜索</button>
			<button class="margin-left-xs cu-btn bg-gradual-blue shadow-blur" @tap="formModal=true">新增机器</button>
		  </view>
		</view>
		<view class="grid col-3 text-center solids-top">
			<view @tap="navigateTo('/pages/customer/machine?_id='+item._id)" v-for="(item,index) in list" :key="index" :class="index%3!=2?'solids-right':''" class="solids-bottom padding-xs flex flex-direction">
				<image :src="item.img" mode="widthFix" />
				<view class="padding-xs" :class="item.isOnline?'bg-gradual-green':'bg-grey'">{{item.name}}</view>
			</view>
		</view>
		<view class="cu-modal" :class="formModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">新增机器</view>
					<view class="action" @tap="formModal=false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<view class="cu-form-group">
						<view class="title">机器名称:</view>
						<input style="text-align:left;" v-model="form.name" placeholder="用于搜索"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">机器IMEI:</view>
						<input style="text-align:left;" v-model="form.IMEI"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">机器型号:</view>
						<picker @change="pickerChange" :value="index" :range="modelList" range-key="name">
							<view class="picker">
								{{index>-1?modelList[index].name:'请选择型号'}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group">
						<view class="title">售后联系电话:</view>
						<input style="text-align:left;" type="tel" v-model="form.phoneNumber"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">复制的机器IMEI:</view>
						<input style="text-align:left;" v-model="form.copyIMEI" placeholder="不为空则机器型号选择无效"></input>
					</view>
					
					<button class="cu-btn lg bg-blue" @tap="clickSubmitForm">确认新增</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filter:'',
				formModal:false,
				form:{
					name:'',
					IMEI:'',
					copyIMEI:'',
					modelId:'',
					phoneNumber:''
				},
				list:[],
				index:0,
				modelList: [],
			};
		},
		onLoad(){
			this._getModalList();
		},
		onShow(){
			this._getList();
		},
		methods:{
			_getList(){
				this.$u.api.machineList({filter:this.filter}).then(data => {
					this.list=data;
				});
			},
			_getModalList(){
				this.$u.api.customer_modelList({}).then(data => {
					//console.log(data);
					this.modelList=data;
				});
			},
			navigateTo(url){
				//console.log(router);
				//this.$u.route(router,params);
				uni.navigateTo({
				    url: url
				});
			},
			clickSubmitForm(){
				if(!this.form.copyIMEI){
					this.form.modelId=this.modelList[this.index]._id;
				}
				this.$u.api.customer_machineAdd(this.form).then(data => {
					this.formModal=false;
					this._getList();
				});
			},
			pickerChange(e){
				this.index = e.detail.value
			},
			search(){
				this._getList();
			}
		}
	}
</script>

<style lang="scss">

</style>
